<!DOCTYPE html>
<html ng-app="MyModule">
<head>
	<meta charset="utf-8">
	<script src="jquery/jquery.min.js"></script>
	<script src="bootstrap/dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
	<div ng-controller="templateCtrl">
		<table class="table table-hover" ng-cloak="">
			<thead>
				<tr>
					<th>Policy Name<!--这里不加ng-click的话，有问题   自己添加的click事件没有进行dom的渲染-->
						<tablesorticon tablepropertyname="propertyName" reverse="reverse" colname="{{'name'}}"></tablesorticon>
					</th>
					<th ng-click="sortBy('desc')">Description
						<tablesorticon tablepropertyname="propertyName" reverse="reverse" colname="{{'desc'}}"></tablesorticon>
					</th>
					<th ng-click="sortBy('updateTime')">Last Updated
						<tablesorticon tablepropertyname="propertyName" reverse="reverse" colname="{{'updateTime'}}"></tablesorticon>
					</th>
				</tr>
			</thead>
			<tr ng-repeat="np in networkPolices | orderBy:propertyName:reverse track by $index">
				<td>{{np.name}}</td>
				<td>{{np.desc}}</td>
				<td>{{np.updateTime}}</td>
			</tr>
		</table>
	</div>
	
	<script src="angular-1.5.8/angular.min.js"></script>
	<script>
		var myModule=angular.module('MyModule',[]);
		
		myModule.controller('templateCtrl', ['$scope',function($scope) {
			$scope.propertyName = 'updateTime';
			$scope.reverse = true;

			// $scope.sortBy = function(propertyName) {
			// 	$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
			// 	$scope.propertyName = propertyName;
			// };
			$scope.networkPolices = [
			{ "id": "1", "policyType": { "wireless": true, "lan": true }, "name": "wang_test", "ssid_num": 1, "template_num": 2, "desc": "good a", "updateTime": "2018-1-1" },
			{ "id": "2", "policyType": { "wireless": true, "lan": true }, "name": "cisco", "ssid_num": 2, "template_num": 3, "desc": "good b", "updateTime": "2018-1-2" },
			{ "id": "3", "policyType": { "wireless": true, "lan": true }, "name": "apple", "ssid_num": 4, "template_num": 2, "desc": "good c", "updateTime": "2018-1-3" },
			{ "id": "4", "policyType": { "wireless": true, "lan": true }, "name": "donghua", "ssid_num": 5, "template_num": 3, "desc": "good d", "updateTime": "2018-1-4" }
			];
			$scope.testCont="test";
		}]);
		myModule.directive('tablesorticon', function() {
			return {
				restrict: 'E',
				scope: {
					tablepropertyname: '=',//这个字段是双向绑定的
					reverse:'=',//这个是单项绑定的
					colname:'@'//单项绑定，获取到的数据是String类型的，可以传递一个字符串给一个指令
				},
				template: "<span class='glyphicon glyphicon-sort' ng-if='tablepropertyname!=colname'></span>"
				+"<span class='glyphicon glyphicon-sort-by-attributes' ng-if='!reverse&&tablepropertyname==colname'></span>"
				+"<span class='glyphicon glyphicon-sort-by-attributes-alt' ng-if='reverse&&tablepropertyname==colname'></span>",
				controller:function($scope){
					console.log("1");
					this.sortBy = function(colname) {
						console.log("2");
						$scope.reverse = ($scope.tablepropertyname === colname) ? !$scope.reverse : false;
				        $scope.tablepropertyname = colname;
					};
				},
				controllerAs:"tableSortCtrl",//给上面的控制器起别名
				link:function(scope,ele,atrrs,tableSortCtrl){
					console.log("3");
					console.log(ele.parent("th")[0]);//有几条指令就执行几次
					ele.parent("th").on('click', function() {//给父级th元素都加上一个click的函数
						tableSortCtrl.sortBy(scope.colname);
						console.log("4");
					});
				}
			}
		})
		myModule.directive("hello",function($templateCache){
			return {
				scope:false,
				restrict:'E',
					transclude:true,//使用transclude实现指令之间的嵌套
					template:"<div>Hello everyone!<div ng-transclude></div></div>",
					controller:function($scope){
						console.log($scope.$id);
					}
				}
			});
		</script>
	</body>

	</html>